<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高炉</title>
	<link rel="stylesheet" href="../css/normalize.css"/>
	<link rel="stylesheet" href="../css/common.css"/>
	<link rel="stylesheet" href="../css/gaolu.css"/>
</head>
<body class="theme">
<div id="gaolu">
	<div id="header">
		<!-- 头部导航组件 -->
		<header-nav></header-nav>
	</div>
	<section class="main outter-top clearfix auto">
		<div class="left-side fl skin outter-right" id="left_side">
			<!-- 产用交互组件 -->
			<production-component></production-component>
			<!-- 主管压力放散组件 -->
			<pressure-component></pressure-component>
			<div class="gas">
				<div class="gas-title outter-top  outter-bottom  clearfix">
					<h2 class="common-title fl">
						产气波动归因
					</h2>
					<ul class="gas-legend fl">
						<li class="gas-legend-des fl">
							<span class="gas-legend2-icon fl gas-legend-icon legend-icon"></span>
							<span class="fl">波动贡献度</span>
						</li>
					</ul>
				</div>
				<div class="gas-content skin2 border" id="gas_chart" >
					
				</div>
			</div>
		</div>
		<div class="main-contain skin fl" >
			<div class="main-container highlight-border">
				<div class="data-picker">

				</div>
				<ul class="main-list skin2   clearfix ">
					<li class="main-item main-item-border fl">
						<div class="main-item-data main-item-data-border  main-item-normal">
							<h3 class="main-item-data-title inner-top outter-left">1号高炉</h3>
							<div class="main-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current">当前产气量 <br/><span class="current-data">0.0</span></p>
								<p class="fl main-item-data-prediction">预计产气量 <br/><span class="prediction-data">0.0</span></p>
								<p class="fl unit"><span>X10⁵m³/h</span></p>
							</div>
						</div>
						<div class="main-item-chart" id="chart"  data-index="0" data-name="blast1"></div>
					</li>
					<li class="main-item main-item-border fl">
						<div class="main-item-data main-item-data-border  main-item-normal">
							<h3 class="main-item-data-title inner-top outter-left">2号高炉</h3>
							<div class="main-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current">当前产气量 <br/><span class="current-data">0.0</span></p>
								<p class="fl main-item-data-prediction">预计产气量 <br/><span class="prediction-data">0.0</span></p>
								<p class="fl unit"><span>X10⁵m³/h</span></p>
							</div>
						</div>
						<div class="main-item-chart" id="chart1" data-index="1"  data-name="blast2"></div>
					</li>
					<li class="main-item main-item-border fl">
						<div class="main-item-data main-item-data-border main-item-normal">
							<h3 class="main-item-data-title inner-top outter-left">3号高炉</h3>
							<div class="main-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current">当前产气量 <br/><span class="current-data">0.0</span></p>
								<p class="fl main-item-data-prediction">预计产气量 <br/><span class="prediction-data">0.0</span></p>
								<p class="fl unit"><span>X10⁵m³/h</span></p>
							</div>
						</div>
						<div class="main-item-chart"  data-index="2" data-name="blast3"></div>
					</li>
					<li class="main-item main-item-border fl">
						<div class="main-item-data main-item-data-border  main-item-reduce">
							<h3 class="main-item-data-title inner-top outter-left">4号高炉</h3>
							<div class="main-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current">当前产气量 <br/><span class="current-data">0.0</span></p>
								<p class="fl main-item-data-prediction">预计产气量 <br/><span class="prediction-data">0.0</span></p>
								<p class="fl unit"><span>X10⁵m³/h</span></p>
							</div>
						</div>
						<div class="main-item-chart"  data-index="3" data-name="blast4"></div>
					</li>
					<li class="main-item fl">
						<div class="main-item-data main-item-data-border  main-item-mod">
							<h3 class="main-item-data-title inner-top outter-left">5号高炉</h3>
							<div class="main-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current">当前产气量 <br/><span class="current-data">0.0</span></p>
								<p class="fl main-item-data-prediction">预计产气量 <br/><span class="prediction-data">0.0</span></p>
								<p class="fl unit"><span>X10⁵m³/h</span></p>
							</div>
						</div>
						<div class="main-item-chart"   data-index="4" data-name="blast5"></div>
					</li>
				</ul>
				<div class="main-container-active slideDown">
					<ul class="main-container-active-list clearfix">
						<li class="fl main-container-active-item-data main-item-border main-item-data-border  main-item-normal">
							<div class="main-container-active-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current">当前产气量 <br/><span class="current-data">0.0</span></p>
								<p class="fl main-item-data-prediction">预计产气量 <br/><span class="prediction-data">0.0</span></p>
								<p class="fl unit main-container-active-unit">
									<span class="main-container-active-bg"></span>
									<span>X10⁵m³/h</span>
								</p>
								<span class="main-container-active-num">1</span>
							</div>
						</li>
						<li class="fl main-container-active-item-data main-item-border main-item-data-border  main-item-normal">
							<div class="main-container-active-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current">当前产气量 <br/><span class="current-data">0.0</span></p>
								<p class="fl main-item-data-prediction">预计产气量 <br/><span class="prediction-data">0.0</span></p>
								<p class="fl unit main-container-active-unit">
									<span class="main-container-active-bg"></span>
									<span>X10⁵m³/h</span>
								</p>
								<span class="main-container-active-num">2</span>
							</div>
						</li>
						<li class="fl main-container-active-item-data main-item-border main-item-data-border  main-item-normal">
							<div class="main-container-active-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current">当前产气量 <br/><span class="current-data">0.0</span></p>
								<p class="fl main-item-data-prediction">预计产气量 <br/><span class="prediction-data">0.0</span></p>
								<p class="fl unit main-container-active-unit">
									<span class="main-container-active-bg"></span>
									<span>X10⁵m³/h</span>
								</p>
								<span class="main-container-active-num">3</span>
							</div>
						</li>
						<li class="fl main-container-active-item-data main-item-border main-item-data-border  main-item-normal">
							<div class="main-container-active-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current">当前产气量 <br/><span class="current-data">0.0</span></p>
								<p class="fl main-item-data-prediction">预计产气量 <br/><span class="prediction-data">0.0</span></p>
								<p class="fl unit main-container-active-unit">
									<span class="main-container-active-bg"></span>
									<span>X10⁵m³/h</span>
								</p>
								<span class="main-container-active-num">4</span>
							</div>
						</li>
						<li class="fl main-container-active-item-data main-item-data-border  main-item-normal">
							<div class="main-container-active-item-data-content outter-align clearfix">
								<p class="fl main-item-data-current">当前产气量 <br/><span class="current-data">0.0</span></p>
								<p class="fl main-item-data-prediction">预计产气量 <br/><span class="prediction-data">0.0</span></p>
								<p class="fl unit main-container-active-unit">
									<span class="main-container-active-bg"></span>
									<span>X10⁵m³/h</span>
								</p>
								<span class="main-container-active-num">5</span>
							</div>
						</li>
					</ul>

					<div class="main-container-active-view">
						<a href="javascript:;" class="main-container-active-view-close" id="main_container_active_view_close"></a>
					    <ul class="gaolu-active-legend clearfix">
					    	<li class="gaolu-active-legend-des fl" data-selected="0" data-name="gaolu1">
								<span class="gaolu-legend1-icon fl gaolu-legend-icon legend-icon"></span>
								<span class="fl">1号</span>
							</li>
							<li class="gaolu-active-legend-des fl"  data-selected="0" data-name="gaolu2">
								<span class="gaolu-legend2-icon fl gaolu-legend-icon legend-icon"></span>
								<span class="fl">2号</span>
							</li>
							<li class="gaolu-active-legend-des fl"  data-selected="0" data-name="gaolu3">
								<span class="gaolu-legend3-icon fl gaolu-legend-icon legend-icon"></span>
								<span class="fl">3号</span>
							</li>
							<li class="gaolu-active-legend-des fl"  data-selected="0" data-name="gaolu4">
								<span class="gaolu-legend4-icon fl gaolu-legend-icon legend-icon"></span>
								<span class="fl">4号</span>
							</li>
							<li class="gaolu-active-legend-des fl"  data-selected="0" data-name="gaolu5">
								<span class="gaolu-legend5-icon fl gaolu-legend-icon legend-icon"></span>
								<span class="fl">5号</span>
							</li>
							<li class="gaolu-active-legend-des fl"  data-selected="0" data-name="SUM">
								<span class="gaolu-legend6-icon fl gaolu-legend-icon legend-icon"></span>
								<span class="fl">SUM</span>
							</li>
					    </ul>
						<div class="main-container-active-chart" id="gaolu_chart">

						</div>
					</div>
					
				</div>
			</div>
			<div id="main_content">
				<message-center :msg="msgCenter" :srcdata = "srcline"></message-center>
			</div>	
		</div>
	</section>
</div>
</body>
<script src="../js/lib/jquery-1.11.0.min.js"></script>
<script src="laydate.js"></script>
<script src="../js/lib/echarts.js"></script>
<script src="../js/lib/vue.min.js"></script>
<script src="../js/lib/elementUi.js"></script>
<script src="../js/lib/vue-resource.js"></script>
<script src="../js/data.js"></script>
<script src="../js/base.js"></script>
<script src="../js/common.js"></script>
<script src="../js/chart.js"></script>
<script src="../js/components.js"></script>
<script src="../js/gaolu.js"></script>
</html>